<script lang="ts" setup>
import { ref, onMounted, reactive} from 'vue'
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
import { getMenu } from '@/api/Homeview'


    defineProps({
      collapsed: {
        type: Boolean
      }
    })

    // const activeIndex = ref('0') // 默认激活的菜单索引
    // onMounted(() => {
    //   // 检查 sessionStorage 中是否有之前保存的索引，并设置为当前激活索引
    //   const savedIndex = sessionStorage.getItem('activeMenuIndex')
    //   if (savedIndex) {
    //     activeIndex.value = savedIndex
    //     console.log(savedIndex);
        
    //   }
    // })

    const isCollapse = ref(true)
    const handleOpen = (key: string, keyPath: string[]) => {
    //console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
    //console.log(key, keyPath)
    }

    //获取菜单
    const menuData = reactive({
      list:[
        {"topMenuName":"工作台","topIcon":"el-icon-odometer","url":"/dashboard"},
        {"topMenuName":"监控管理","topIcon":"el-icon-menu","submenu":[{"name":"实时监控","icon":"el-icon-s-promotion","url":"/timeMonitoring"},{"name":"仓储监控","icon":"el-icon-trophy","url":"/warehouseMonitoring"},]},
        {"topMenuName":"报警管理","topIcon":"el-icon-bangzhu","submenu":[{"name":"报警配置","icon":"el-icon-aim","url":"/alarmConfiguration"},{"name":"实时报警","icon":"el-icon-news","url":"/timeAlarm"},{"name":"报警记录","icon":"el-icon-tickets","url":"/alarmRecord"}]},
        {"topMenuName":"统计报表","topIcon":"el-icon-odometer","url":"/statisticalReport"},
        {"topMenuName":"历史记录","topIcon":"el-icon-setting","submenu":[{"name":"仓储报警记录","icon":"el-icon-bell","url":"/warehouseAlarmRecords"},{"name":"仓储历史记录","icon":"el-icon-s-custom","url":"/warehouseHistoryRecords"}]},
        {"topMenuName":"系统管理","topIcon":"el-icon-setting","submenu":[{"name":"企业管理","icon":"el-icon-bell","url":"/businessManagement"},{"name":"库房管理","icon":"el-icon-s-custom","url":"/warehouseManagement"},{"name":"主机管理","icon":"el-icon-user-solid","url":"/hostManagement"},{"name":"仪表管理","icon":"el-icon-user-solid","url":"/instrumentManagement"}]}
      ]
    });


    // onMounted(async()=>{
    //   const{ data }=await getMenu()
    //   //console.log(data.data);
    //   menuData.list=JSON.parse(data.data);
    //   //console.log(menuData.list);
      
    // })

    //获取icon图标
    function getIconComponentName(icon) {
      // 移除 'el-icon-' 前缀，并将剩余部分首字母大写
      if(icon == 'el-icon-bangzhu'){
        icon = 'el-icon-help';
      }
      if(icon == 'el-icon-s-promotion'){
        icon = 'el-icon-promotion'
      }
      if(icon == 'el-icon-news'){
        icon = 'el-icon-notification'
      }
      if(icon == 'el-icon-notebook-2'){
        icon = 'el-icon-notebook'
      }
      if(icon == 'el-icon-s-custom'){
        icon = 'el-icon-user'
      }
      if(icon == 'el-icon-user-solid'){
        icon = 'el-icon-userFilled'
      }
      return icon.replace('el-icon-', '')
                 .replace(/^\w/, (c) => c.toUpperCase());
    }

</script>

<template>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :value="false">expand</el-radio-button>
      <el-radio-button :value="true">collapse</el-radio-button>
    </el-radio-group> -->
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      :collapse="collapsed"
      @open="handleOpen"
      @close="handleClose"
      background-color="#00000000"
      text-color="#FFFFFF"
    >
      <el-menu-item index="-1">
        <el-icon><icon-menu /></el-icon>
        <template #title>冰眼</template>
      </el-menu-item>
      <!-- submenu -->
      <template v-for="(v,i) in menuData.list" :key="i">
        <el-sub-menu :index="String(i)" v-if="v.submenu && v.submenu.length">
          <template #title>
            <!-- 动态绑定 topIcon 类名 -->
            <el-icon><component :is="getIconComponentName(v.topIcon)" /></el-icon>
            <span>{{ v.topMenuName }}</span>
          </template>
          <el-menu-item-group>
            
            <router-link :to="'/homeview'+value.url" v-for="(value,index) in v.submenu" :key="index" :style="{ textDecoration: 'none' }">
              <el-menu-item :index="String(i)+'-'+String(index)">
                <el-icon><component :is="getIconComponentName(value.icon)" /></el-icon>
                {{value.name}}
              </el-menu-item>
            </router-link>
            
          </el-menu-item-group>
        </el-sub-menu>

        <router-link :to="'/homeview'+v.url" v-else :style="{ textDecoration: 'none' }">
          <el-menu-item :index="String(i)">
            <el-icon><Odometer /></el-icon>
            <template #title>{{ v.topMenuName }}</template>
          </el-menu-item>
        </router-link>

      </template>

      <!-- <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>Navigator One</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">item one</el-menu-item>
          <el-menu-item index="1-2">item two</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>Navigator Two</template>
      </el-menu-item> -->
      
    </el-menu>
  </template>
  

  
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}



</style>